<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1" title="当日耗水量">
        <template slot="title">
          <span class="font-bold font14 color-black">当日耗水量</span>
        </template>
        <div>
          <span class="font-bold color-primary font24">15mm</span>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2" title="需要补给量">
        <template slot="title">
          <span class="font-bold font14 color-black">需要补给量</span>
        </template>
        <el-descriptions
          border
          :column="3"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item label="低">
            <span class="font-bold color-danger font24">6mm</span>
          </el-descriptions-item>
          <el-descriptions-item label="中">
            <span class="font-bold color-warning font24">4mm</span>
          </el-descriptions-item>
          <el-descriptions-item label="高">
            <span class="font-bold color-success font24">2mm</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item name="3" title="降雨量">
        <template slot="title">
          <span class="font-bold font14 color-black">降雨量</span>
          <el-link
            class="ml12"
            icon="el-icon-document"
            size="mini"
            type="primary"
            @click.stop="showQxz()"
          >
            查看详情
          </el-link>
        </template>
        <div class="d-flex align-items-center">
          <span class="font-bold color-primary font24">2mm</span>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4" title="实际灌溉">
        <template slot="title">
          <span class="font-bold font14 color-black">实际灌溉</span>
          <el-link
            class="ml12"
            icon="el-icon-document"
            size="mini"
            type="primary"
            @click.stop="showIrrigation()"
          >
            查看详情
          </el-link>
        </template>
        <el-descriptions
          border
          :column="2"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item label="计划名称">
            喷灌20240701
          </el-descriptions-item>
          <el-descriptions-item label="执行时间">
            2024-07-01 14:00:00
          </el-descriptions-item>
          <el-descriptions-item label="行进方向">
            <span class="font-bold color-success font16">正向</span>
          </el-descriptions-item>
          <el-descriptions-item label="执行状态">
            <el-tag type="success">已完成</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="灌溉时长">
            <span class="font-bold color-success font16">5小时24分钟</span>
          </el-descriptions-item>
          <el-descriptions-item label="总水量">
            <span class="font-bold color-success font16">32.4方</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        day: '',
        activeNames: ['1', '2', '3', '4'],
        title: '详情',
      }
    },
    methods: {
      show(day) {
        this.dialogVisible = true
        this.day = day.day
        this.title = day.day + ' 详情'
      },
      showQxz() {
        this.$baseMessage('查看气象详情', 'primary')
      },
      showIrrigation() {
        this.$baseMessage('查看灌溉计划详情', 'primary')
      },
    },
  }
</script>

<style lang="scss" scoped></style>
